<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态下拉菜单</title>
    <link rel="stylesheet" href="/static/css/cd.css">
    <script src="/static/js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <!--nav-->
    <div class="nav11">
        <!--导航条-->
        <ul class="nav-main">
            <li>首页</li>
            <li id="li-1">关于<span></span></li>
            <li id="1i-2">信息<span></span></li>
            <li id="1i-3">消费者服务<span></span></li>
            <li id="1i-4">商务服务<span></span></li>
            <li>研究中心</1i>
                <ul>

                    <div id="box1" class="hidden-loc-index" hidden>
                        <ul>
                            <li>目的意义</li>
                            <li>发展历程</li>
                            <li>组织架构</li>
                            <li>精英団队</li>
                        </ul>
                    </div>
                    <div id="box-2" class="hidden-box hidden-loc-us" hidden>
                        <ul>
                            <li>加入联盟步骤</li>
                            <li>申清要求</li>
                        </ul>
                    </div>
                    <div id="box-3" class="hidden-box hidden-loc-info" hidden>
                        <ul>
                            <li>消费者服务</li>
                            <li>产品信息</li>
                            <li>关于我们</li>
                            <li>商家信息</li>
                            <li>加如我们</li>
                            <li>关于我们</li>
                            <li>产品信息</li>
                        </ul>
                    </div>
                    <div id="box-4" class="hidden-box hidden-loc-info box04" hidden>
                        <ul>
                            <li>服务理念</li>
                            <li>服务产品</li>
                            <li>周边有机网络</li>
                            <li>商铺汇集</li>
                            <li>有机百科</li>
                            <li>保障与维权</li>
                        </ul>
                    </div>
                </ul>
    </div>
    <script>
        $(document).ready(function () {
            // nav-li hover
            var num;
            $('.nav-main > li[id]').hover(function () {
                /* 图标向上旋转 */
                $(this).children().removeClass().addClass('hover-up');
                /* 下拉框出现 */
                var Obj = $(this).attr('id');
                num = Obj.substring(3, Obj.length);
                $('#box-' + num).slideDown(300);
            }, function () {
                /* 图标向下旋转 */
                $(this).children().removeClass().addClass('hover-down');
                /* 下拉框消失 */
                $('#box-' + num).hide();
            });
        });

    </script>
</body>

</html>